import React, {
    Component, useRef
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    TextInput
} from 'react-native';


export default class BuyerInfoBox extends Component {


    constructor(props) {
        super(props);
        this.state = {
            isFocus: false,
            price: this.props.quotationData.quotationPrice / (10000 * 100) + '',
            isServiceFee: 0,
        };
    }

    render() {
        const { quotationData } = this.props
        
        return (
            <View style={styles.container}>
                <Text style={styles.titleText}>{'当前买家：' + this.props.buyerMerchantName}</Text>
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText}>车价确认</Text>
                    <View style={{ flexDirection: 'row', height: '100%', alignItems: 'center', justifyContent: 'flex-start'}}>
                        <Text style={styles.itemPriceText}>
                            {(this.props.quotationPrice && !isNaN(this.props.quotationPrice)
                                ? this.props.quotationPrice / 100
                                : '') + '元'}
                        </Text>

                        {this.props.isCanEditPrice ?
                            <TouchableOpacity
                                style={styles.changePriceBox}
                                onPress={() => {
                                    this.props.navigation.navigate('ModifyInputPage', { onConfirm: this.props.onConfirm,title:'价格编辑页',value: this.formatPrice(this.props.quotationPrice)+'' })
                                }}
                            >
                                <Text style={{ fontSize: 14, color: '#666' }}>修改金额</Text>
                            </TouchableOpacity>
                            :
                            null
                        }
                    </View>
                </View>

                {this.props.isCanEditPrice ?
                    <View>
                        <TouchableOpacity onPress={()=>{
                            const newServiceFeeValue = this.state.isServiceFee == 1 ? 0 : 1;
                            this.setState({
                                isServiceFee: newServiceFeeValue
                            })
                            // 调用父组件传递的回调函数，将新值传递给父组件
                            this.props.onServiceFeeChange(newServiceFeeValue);
                        }} style={styles.optionRow}>
                            <Text style={styles.optionLabel}>{'门店服务费'}</Text>
                            <View style={styles.priceAndCheckbox}>
                                <View style={styles.checkbox}>
                                    {this.state.isServiceFee == 1 && <View style={styles.checkboxSelected} />}
                                </View>
                                <Text style={styles.price}>{'免除服务费'}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    :
                    null
                }
                
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText1}>成交价</Text>
                    {this.state.isServiceFee == 1
                        ? <Text style={styles.itemDealPriceText}>
                            {'¥' + ((quotationData.tradePrice && quotationData.detectionFee && !isNaN(quotationData.tradePrice) && !isNaN(quotationData.detectionFee))
                                ? (quotationData.tradePrice - quotationData.detectionFee) / 100
                                : '')}
                        </Text>
                        : <Text style={styles.itemDealPriceText}>
                            {'¥' + (quotationData.tradePrice && !isNaN(quotationData.tradePrice)
                                ? quotationData.tradePrice / 100
                                : '')}
                        </Text>
                    }
                </View>
                <View style={{ flexDirection: 'column', width: '100%', borderRadius: 6, backgroundColor: '#F4F4F4', paddingHorizontal: 16 }}>
                    <View style={styles.infoBox1}>
                        <Text style={styles.itemTitleText2}>预收车款</Text>
                        <Text style={styles.itemDesText}>{'¥' + this.formatPrice(quotationData.advancePayment)}</Text>
                    </View>
                    <View style={styles.infoBox1}>
                        <Text style={styles.itemTitleText2}>待收尾款</Text>
                        <Text style={styles.itemDesText}>{'¥' + this.formatPrice(quotationData.tailPayment)}</Text>
                    </View>
                    <View style={styles.infoBox1}>
                        <Text style={styles.itemTitleText2}>门店服务费</Text>
                        {this.state.isServiceFee == 1
                            ? <Text style={styles.itemDesText}>{'¥0'}</Text>
                            : <Text style={styles.itemDesText}>{'¥' + this.formatPrice(quotationData.detectionFee)}</Text>}

                    </View>
                    <View style={styles.infoBox1}>
                        <Text style={styles.itemTitleText2}>运费</Text>
                        <Text style={styles.itemDesText}>{'到付'}</Text>
                    </View>

                </View>
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText1}>备注：</Text>
                    <Text style={styles.itemremarkText}>{quotationData.remark}</Text>
                </View>
            </View>
        )
    }

    formatPrice(price) {
        if (!price || isNaN(price)) return '';
        return (price / 100).toString();
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        width: '100%',
        flexDirection: 'column',
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingHorizontal: 16,
        paddingVertical: 14,
    },
    titleText: {
        marginBottom: 12,
        fontSize: 14,
        fontWeight: '500',
        color: '#333333'
    },
    infoBox: {
        height: 46,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%'
    },
    itemTitleText: {
        color: '#333',
        fontSize: 14,
        fontWeight: '500'
    },
    itemTitleText1: {
        color: '#333',
        fontSize: 14,
    },
    itemPriceText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#ED542E'
    },
    itemPriceInput: {
        fontSize: 16,
        fontWeight: '500',
        color: '#ED542E',
        flex: 1,
        textAlign: 'right',

    },
    changePriceBox: {
        height: '100%',
        marginLeft: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    itemremarkText: {
        fontSize: 14,
        color: '#333'
    },
    itemDealPriceText: {
        fontSize: 14,
        fontWeight: '500',
        color: '#ED542E'
    },
    infoBox1: {
        height: 38,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    itemTitleText2: {
        color: '#666',
        fontSize: 14,
    },
    itemDesText: {
        color: '#666',
        fontSize: 14,
        fontWeight: '500'
    },

    // 按钮
    optionRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 15,
    },
    optionLabel: {
        color: '#333',
        fontSize: 14,
        fontWeight: '500'
    },
    priceAndCheckbox: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    price: {
        fontSize: 14,
        color: '#333',
        marginLeft: 5,
    },
    checkbox: {
        width: 20,
        height: 20,
        borderWidth: 1,
        borderColor: '#FFDB1B',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
    },
    checkboxSelected: {
        width: 12,
        height: 12,
        backgroundColor: '#FFDB1B',
        borderRadius: 2,
    },


})